Working with Web Pages in Dreamweaver 8 
updated June 05, 2007 


Introduction and Preparation 


In this tutorial you will be creating a fictitious book selling web site. Because the web pages 
that you will create will be linked to other pages and images it is important to start by 


1. creating a folder which will contain your web pages and images. If you will be working 
on multiple machines you may want to create this folder on a jumpdrive or floppy disk. 


Please follow the following protocol for naming your folders and web pages 


No spaces, extra periods, or special characters (except dashes or underscores) 
No numbers at the beginning of the file name 

Every file name must be unique 

Use lowercased letters 


oOo0 0 


2. Within your web site folder create another folder to contain your images. 


By having all elements of your web site contained within one main folder, you will be 
less likely to "break links". 
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D. Remove Contents From The Content Area Cell Of The Table 
E. Add Background Color To The Table Cells 
F. Add New Content 
G. Add Unordered (Bulleted) Lists 
H. Add Ordered (Numbered) Lists 
|. Add Anchor Links To Your Page 
IV. Adding A Form 
A. Insert A Form Object 


B. Form Objects 
C. Insert Text Field 


D. Insert Checkboxes 

E. Insert List/Menu 

F. Insert Radio Buttons 

G. Insert A Multi Line Text Field 

H. Insert Submit and Reset Buttons 


|. Setting Up Your Home Page 
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The first thing you will see when you open Dreamweaver 8 is the new Start page. This page 
provides quick access to most of the commands you need to get started with Dreamweaver. 
Begin by choosing "HTML". This will bring up a blank page in either Design view, Code view, 
or Split view--depending upon the preferences that were set. You can easily switch between 
views by clicking the "Code", "Split", or "Design" buttons in the objects toolbar. The example 
below shows the Design View. 


Insert Bar Hocurment Toolbar Document Window Panel Groups 


5} Untitied 1 DOITML) =p 
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Page Properties 


Tag Selector Property Inspector Files Panel 


B. Save Your File 


Save a new copy of your page in the folder that you created as "home.html" by clicking on the 
"File" menu and "Save As" option. Save frequently to prevent loss of data. 


C. Give Your Page A Title 


The title of your web page is the title that shows up in the title bar of the Web browser when 
someone opens your page. This title is very important as it is used to bookmark the page in 
Bookmarks (Netscape) or Favorites (Internet Explorer). Some search engines also use it to 
list your page. 


1. Type "Elephant Press" for the title of your page in the top menu bar. You may also go to 


the "Modify" menu and select "Page Properties”. In the Page Properties Window that opens 
select "Title/Encoding" from the category pane and type "Elephant Press" in the title blank. 
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@ Macromedia Dreanmweaver 8 
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Document Title 


2. File names and Titles: These are two very different things. The file name is always given to 
a page when you Save it. You might think of it as a system name, the same way that a Word 
document is saved as a file. File names have extensions like .doc or .html. File names for 
web pages have very specific rules that you will need to follow: 


e No spaces, extra periods, or special characters (except dashes or underscores) 
e Nonumbers at the beginning of the file name 
e Every file name must be unique 


Titles are not file names. Titles describe in a very few words what the web page is about: My 
First Web Page, Washington State University Home Page, Hewlett Packard Printer Drivers, 
etc. Titles do not have file extensions and do not have to follow the same rules as file names. 


e Can be separate words 

e Can be any length 

e Have no file extensions 

e Can be used for more than one web page 


D. Create A Table 


Using tables to design web pages is a very common method of layout for web designers. By 
creating a table to place all of your web page elements inside of, you are able to align various 
parts of your page much more easily. We will design our web site using tables. Once we 
create the design and add major elements, we will be able to save that page with a new file 
name and reuse the design again and again. Never recreate the wheel. 


For our Web site, we want a table that has one row across the top and two columns under 
that row. 


1. Click on the "Insert" menu. 
2. Click on "Table." 
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Table size 


Rows: || Columns: [2 


Table width: |100 | percent 
Border thickness: | 1 | pixels 
Cellpadding: 5 | |BE 


Cell spacing: 5 


Header 


Accessibility 
Caption: gq 
Align caption: default 


Summary: | 


Change the table properties to include two (2) rows, two (2) columns, and a width of 
100%. We will merge the two cells in the top row after we create the table. 
Change the border to one (1). Having the table border on helps keep visual track of 
where text and images are in relation to everything else on your Web page. When we 
get ready to see what the page will really look like on the web, we can come back to 
the table properties and change the border to zero if we wish. 
Set the Cell Padding and Cell Spacing to five (these measurements, by the way, are 
usually rendered in pixels — a pixel is a square of light/color that goes into making up 
the screen on your computer. We will talk more about pixels when we talk about 
images.). 
o Cell Padding is the space inside of the table cell surrounding the contents of the 
cell. 
o Cell Spacing is the space between the table cells. 
Click on the Ok button and your table will be placed on your page. Note the Property 
inspector now has the table properties showing. 
Merging table cells: 
o Click in the first cell of the top row, hold down the mouse button and drag 
across both cells in that row. 
o Inthe Property inspector, click on the merge cells button. 
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Merge Cells Button 


o Your table should now have one row on top and two columns under it. 


1. Change the vertical alignment. You will need to set the Vertical Alignment of each of 
the table cells. The default is for content in the table cell to be vertically aligned in the 
middle of the cell. The problem with the default occurs when one cell has a lengthy 
content next to a cell with only a few lines. 


Lots of content in this area will force 
scrolling just to be able to see the 
content in the left-hand cell. This 
problem is caused by the default vertical 


Line one alignment in web tables. The default is 
Line two fics: sie eis ; 

; middle,” which aligns all cell content 
Line three . . : ; 
(ine four vertically in the middle of the cell. To fix 


this problem, we need to reset the 
vertical alignment in each table cell to 
"top." This little table demonstrates what 
happens if the default is left alone. 


o Click in a table cell. 
o Click on the arrow next to the "Vert:" menu in the Property inspector Select 
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set vertical alignment of cells here 


o Repeat for each of the table cells. 

o Save your page. You are now ready to enter text, images, color, links and 
anything else you want on your page. You will be working inside of this table 
structure. 
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Il. Adding Content To Your Home Page 


A. Add a Heading To Your Page 


1. 
2. 


5. 
6. 


Click on the first row of your table. 
Type in the text for the Main Heading on your home page. For example: 

o Elephants and More Elephants 

o Inthe Wild and In Captivity 

o Remember to press the Enter key between each line 
Select the first line of your title by clicking and holding down the mouse button; drag 
across the text to highlight it. Remember: anytime you want to do anything to text or 
objects on your web page, they must first be selected. 
Change the text to a "Heading 1" using the Format Selector in the Property inspector 
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Text Formatting Selector 


Select the second line of text and change it to a "Heading 2." 
Save your web page. 


B. Text Alignment, Font Face, Color and Style 


1. 


2, 


Center the two headings by selecting both lines of text, and clicking on the Alignment 
buttons on the Property inspector. 

Change the Font Face of your headings by selecting both lines of text and clicking on 
the "Font" drop-down menu, then clicking on the font face you want. For example: 
Arial, Helvetica, sans-serif. 
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FontMenu Color Selector Text Styles Text Alignment Buttons 


Change the color of the text by selecting both lines of text and clicking on the Color 
Selector box on the Property inspector. The Color Selector pops up and you can select 
the color you want by clicking on that color. 

Change the text style you want by selecting both lines of text and clicking on the Bold 
and/or Italics buttons on the Property inspector. 

Save your web page. 
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C. Add Text For Navigation Linking 


Navigation around your site is very important. You want people to be able to click on a link to 
take them to another page, to allow them to see other information, or even to be able to 
download another type of document. Carefully consider the words you use when creating 
navigation links. Use text that is brief, but descriptive of where that link is going to take the 
user. For example, if you have a page that describes where you might find elephants, your 
link to that page might say: Geographic Locations, Where The Elephants Are, or something 
similar. Navigation on your web site also needs to be consistent and clear. You are now 
ready to add some links to other pages on your site. 


1. Click in the second row, first column of your table. 
2. Type the following text, pressing the Enter key after each entry: 


Elephant Press Home 
Elephants in the Wild 
Elephants in Captivity 
Portland Oregon Zoo 
Copyright/Disclaimer 


3. Save your web page. 


D. Making Hyperlinks 


Hypertext links are text or images that take you to other pages or web sites when clicked on. 
In general, links are made by selecting the text you want to be a link and indicating the web 
page or web site to link to. 


1. Internal Links: links to other pages YOU have created. 
o Select the text: Elephant Press Home 
o Type inthe name of your home page file (home.html) in the Link box of the 
Property inspector. 
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Enter file name or web address 


e Select the text: Elephants in the Wild 

e Type the file name "wild.html " in the Link box of the Property inspector. 
We have not created this page yet, but we will. 

e Select the text: Elephants in Captivity. 

e Type the file name "captive.html" in the Link box. We will not create this 
page; we will pretend it exists. Or you can follow the steps below for 
External Links and link to an existing web site rather than "captive.html". 
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2. 


e Save your web page. 


External Links: links to other pages or web sites you have NOT created. 
o Select the text: Portland Oregon Zoo. 
o Type inthe web address or URL of the Zoo's Web site 
http:/Awww.oregonzoo.org/ (See note** for instruction on copying URLs from the 
Web browser to use as links) in the Link box in the Property Inspector. 
o Save your Web page. 


= Link! http:/fwww.oregonzoo.org/ ¥\o0 3 
+= Target v | 

90 
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NOTE**: To easily copy a web address from someone else's Web site: 


OUP WNP 


Open the Web browser and navigate to the page you want a link to. 

Double click in the URL or Location box that shows the entire web address. 
Click on the Edit menu and select copy. 

Switch back to Dreamweaver. 

Click in the link box in the Property Inspector. 

Hold down the control key and press the V key (Keyboard Paste command is 
necessary -- Using the Edit menu paste option will NOT work.) 


3. Non-HTML Links -- links to pages that are not Web pages, but may be Word documents, 
spreadsheet files, text files, etc. 


1. 
2. 


3. 


Select the text: Copyright/Disclaimer Statement. 

Type the file name disclaimer.doc in the Link box in the Property Inspector. We will 
create this document next. 

Open a web browser and type this url 
http://Awww.vancouver.wsu.edu/vis/online/html/stdiscl.htm into the address bar. This 
web page contains the disclaimer text that we will need for our "disclaimer.doc". 
Highlight all of the text and copy it (Edit > Copy). 

Next, Open Microsoft Word and create a new document to paste the copied text into. 
Enter your name and userid where directed with in the text. 

Save this file as disclaimer.doc in your main website folder. 

Save your Web page. 
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Remember you can format these text links however you want just like you did with the 
headings at the top of the page. NOTE: If you want to change the color of the links on your 
web pages you do that by clicking on the Modify menu and choosing Page Properties. Link 
colors are set by browser defaults. Changing the text color of a link using the Property 
Inspector will not change this default for the links on your page. So if you want your links to 
be a different color from the normal browser default of blue, you will need to change them in 
the Page Properties. There are several other choices you can make in the Page Properties, 
some of which we will discuss later: 


Page Properties 


Category Appearance 
a Page font: Oefauk Font 
Size: v 
Tracing Image 
Text color: | 
Background color: bre 


Background image: 


Left margin: Right margin: 


Tog margin: Bottom margin: 


E. Resizing the Table to set up Large Content area 


We want to make our table cells the correct size to contain the necessary information 
whether that is a title, navigation, or content. To resize the columns of our table: 


1. Move the mouse pointer to the border between the two columns until you see the 
double arrow mouse. 

2. Click and hold down the mouse button and drag the mouse toward the left side of your 
table. You will need to decide how big or small to have your navigation area, but a 
good size content area is important. 

3. Save your Web page. 
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F. Content Area of Your Web Page 


Now we are ready to add content to the home page. Keep in mind some basic principles of 
web design. This home page content will need to say what the whole web site is about, who 
will be interested, what will they be able to see or do or find at this site. 


1. Entering Text: 


e Click in the third (empty) table cell. 


e Type ina Welcome Heading such as "Welcome to Elephant Press" and press the 
enter key. 


e Select the text and change the font size, color, alignment and font face by changing 
them in the Property inspector as before: 
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Font Face Text Size Text Color Text Alignment 


e Save your Web page. 
2. Inserting Objects on your page: 


Objects on a web page include items like tables, images, horizontal rules, links, and line 
breaks. We have inserted a table and links using the Insert menu and using the Property 
inspector. Now we will learn how to use the Objects toolbar to insert other objects. 


ony ROSA EE- 6-9 HO\H-9 


e The Objects toolbar is located at the top of your screen, under the main menu options. 

e There are three menus of the Objects toolbar that you will be using most often: 
Common, HTML and Forms. To switch between object menus in this toolbar, click on 
the toolbar name and choose the menu you want to use. 

e Each of the objects we use in these menus will be explained when and if we use them. 


3. Insert a Horizontal Rule 


e Change the Objects toolbar to HTML. 
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e Click to place the cursor below your welcome heading. 
e Click on the Horizontal Rule Object in the toolbar to insert a horizontal rule where the 
cursor is. 


@ Macromedia Dreamweaver 8 
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Horizontal Rule Object 


e The rule is inserted and the Property inspector changes to allow you to adjust the 
properties of the horizontal rule, if you wish. 
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ObjectName Size ofRule EmbossedorNot Alignment 


e Objects have names that do two things: they make your object accessible to text 
browsers that don't show images or other types of objects and they allow speech 
browsers to speak a name instead of just "image". Horizontal rules, images, and tables 
all have names. 

e Save your Web page. 


4. Editing the table object: 


This is a good time to go back and add a name to our table and, at the same time, learn how 
to edit existing objects on our pages. 


e Click somewhere on the inside borders of your table to select the whole table. When 
the Property Inspector shows the properties of your table you will know you have 
selected the table. Make sure you are selecting the whole table and not just a single 
cell, row, or column. The best place to click seems to be on the borders showing 
between the cells in the upper left or lower left corner. 


| © Properties i 
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for Whole Table — for Table 


e Inthe tables properties, you can also choose a background color for the whole table, 
choose a border color, or even put a background image over the table. Experiment 
with these if you like. You may like a border color and then background color in one or 
two of the cells only. 
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To add background color to individual cells, click in the cell and then add the color in 


the Property Inspector for that cell. 


NOTE: if you put background colors in cells or for the whole table, your background 
image for the whole page (later in this document) will not show through the table. 
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Save your Web page. 


5. Inserting Images 


Change the Objects toolbar back to Common. 


¥9o 
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Border Color for Cell 


Click back in the content area cell, below the horizontal rule. 


Click on the image object in the object toolbar. 


GS # 


Navigate to where your image is in the Select Image Source dialog box. (See NOTE 


below**.) 
Click on the image to select it. 
Click on the OK button to insert the image. 


Select Image Source 
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File name background-elephant 
Files of type: | Image Files (*.gil* jpg:*.jpeg:".png) 
URL: images/background elephant.git 


Relative to: Document v home. html 
Change default Link Relative To in the site definkion. 


117 x 75GIF. 2K / 1 sec 


The Image Tag Accessibility Attributes box may appear next if the dialog box has been 


activated in preferences. 
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Within this dialogue box we can enter alternative text and provide a link to a longer 
description of the image (please see Explanations of Image Properties below for more 
information about alternative text a.k.a. Alt attribute). 


We will not be using the long description option for this tutorial. 
For this example you could enter elephant_background for the alternative text. Click 
OK to insert the image with the alternative text. 


NOTE: Choosing cancel will still insert the image in your document but Dreamweaver 
will not associate accessibility tags with the image. 


Image Tag Accessibility Attributes 


Alternate text: | Yephant_backs v 


Long description: http: ff 


IF you dont want to enter this information when inserting 
objects, change the Accessibility preferences. 


You may also get a message about saving the image to a different location. Click on 
the "No" button. 


**NOTE: Saving image files from the Web: 


PONPr 


Find an image you would like to use on the Web. 

Right click on the image 

Click on Save Image As 

Save the image to your images folder located within you main web site folder. 


IMPORTANT: Do not use images unless you know they are either copyright free or they are 
your own images you have scanned. Most images on the web have copyright protection even 
if it is not clearly evident. Always get permission or only go to sites that have free images. Do 
a web search on free images to find sites. 


Click once on an image to select it. You will then be able to change the properties in 
the Property Inspector. 
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Save your Web page. 


Explanations Of Image Properties 


W and H reserve space for an image on a page as it loads ina 
browser. Dreamweaver automatically fills these fields with the image's 
Original size. Default and unlabeled values are pixels. You can also 
specify the following units: pc (picas), pt (points), in (inches), mm 
(millimeters), and cm (centimeters), and combinations there of, such as 
2in+5mm; Dreamweaver converts the values to pixels in the HTML 
source code. 


If you set W and H values that do not correspond to the actual width 
and height of the image, your image may not display properly in a 
browser. (To restore the original values, click the field labels.) You can 
change these values to scale the display size of this instance of the 
image, but this does not reduce download time because the browser 
downloads all image data before scaling the image. To reduce 
download time and to ensure that all instances of an image appear at 
the same size, use an image editing application (such as Photoshop) to 
scale images. 


Src specifies the source file for the image. Click the folder icon to 
browse to the source file, or type the path. For information on entering 
paths, see Absolute paths. 


Absolute paths provide the complete URL of the linked 
document, including the protocol to use (usually http:// for 
Web pages). For example, 
http:/Awww.macromedia.com/support/dreamweaver/conte 
nts.html is an absolute path. You must use an absolute 
path to link to a document on another server. You can 
also use absolute-path links for local links (to documents 
in the same site) but that approach is discouraged; if you 
move the site to another domain, all of your local 
absolute-path links will break. Also, using relative paths 
for local links provides greater flexibility if you need to 
move files within your site. Note: When inserting images 
(not links): if you use an absolute path to an image that 
resides on a remote server and is not available on the 
local hard drive, you will not be able to view the image in 
your document window. Instead, you must preview the 
document in a browser to see it. If possible, use document 
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or root-relative paths for images. 


Link specifies a hyperlink for the image. Drag the Point-to-File icon to a 
file in the Site window, click the folder icon to browse to a document on 
your site, or type manually the URL path. 


Align aligns an image and text on the same line. Use the Property 
toolbox to set the alignment of an image in relation to the other 
elements in the same paragraph or line. HTML does not provide a way 
to wrap text around the contours of an image, as you can with some 
word processing applications. You can align an image to text, another 
image, a plug-in, or other elements in the same line. You can also use 
the alignment buttons (left, right, and center) to set the horizontal 
alignment of an image. 


Browser Default generally specifies a baseline 
alignment. (The default may differ depending on the site 
visitor's browser.) 


Baseline and Bottom aligns the baseline of the text (or 
other element) to the bottom of the selected object. 


Top aligns an image to the top of the tallest item (image 
or text) in the current line. 


Middle aligns the text baseline with the middle of the 
selected object. 


TestTop aligns the selected object with the top of the 
tallest character in the text line. 


Absolute Middle aligns to the absolute of the current line. 


Absolute Bottom aligns to the absolute bottom (which 
includes descenders, as in the letter g) with the bottom of 
the selected object. 


Left places the selected object on the left margin, 
wrapping text around it to the right. If left-aligned text 
precedes the object on the line, it generally forces left- 
aligned objects to wrap to a new line. 


Right places the object on the right margin, wrapping text 
around the object to the left. If right-aligned text precedes 
the object on the line, it generally forces right-aligned 
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objects to wrap to a new line. 


Alt specifies alternate text that appears in place of the image for text- 
only browsers or for browsers that have been set to download images 
manually. For visually impaired users who use speech synthesizers 
with text-only browsers, the text is spoken out loud. In some browsers, 
this text also appears when the pointer is over the image. 


V Space and H Space add space, in pixels, along the sides of the 
image. V Space adds space along the top and bottom of an image. H 
Space adds space along the left and right of an image. 


Border sets the width, in pixels, of a border around the image. Enter 0 
for no border. You can apply a border to both linked and unlinked 
images. You set link color in the Page Properties dialog box. If you set 
a border for an image which has no links, the border will be the same 
color as text in the paragraph in which the image is inserted. 


6. Inserting a Background Image 


Sometimes it is fun to have an overall background image on your web page. You need to be 
very careful that the image does not overwhelm the text or other images. Remember that the 
main purpose of your web site is not usually the background image. To insert a background 
image on your page: 


Click on the Modify menu. 
Click on Page Properties 
Click on the Browse button next to the Background Image box. This is one way to find 
the images if you cannot remember the file name. 
Navigate to your image in the Select Image source dialog box. 
Click on the image to select it. 
Make sure the Relative To: box has "Document" in it. This will Keep the image in the 
same folder as your web page. 
Click on the Select button. 
Click on the Apply button in the Page Properties dialog box. 
Click on the OK button in the Page Properties dialog box. The background image will 
be tiled across your web page. 
NOTE: If you chose a table background color earlier, you will notice that the Page 
background image will not show on your table. To have your table included in the 
background image, remove the background color on the table by doing the following: 
1. Select the whole table. (Be careful to select the whole table and not just one 
cell.) 
2. Click on the Bgcolor arrow in the Property Inspector to get the color picker. 
3. Click on the Default color button to remove the color. 
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e Save your Web page. 


7. Add text content to Web page 


e Add content that explains the purpose of this Web site. Remember this home page 
should explain what the site is about, whom it is for, and what can be found there. 
e Add Courtesy section. 
1. At the end of your main content, type in your contact message. For example: 
You can contact me by emailing: yourname@youraddress 
2. Select the address part of the text. 
3. Click in the link box in the Property Inspector. 
4. Type in mailto:yourname @youraddress (inserting your email address. Note that 
there are no spaces between those letters.) 
«= Another way is to highlight your email address, then click on the email 
object in the Objects toolbar 
«= In the Text box, type in the text that you want to be the visual cue. A 
visual cue is the actual text the user can click on. As a courtesy it is good 
to type in your actual email address, then a person can write it down if 
their browser is not set to send mail. 
«= Type your actual email address in the E-Mail box 
5. Save your Web page. 


Ill. Creating the Next Web Page 
You can follow Step A any time you want to create another Web page using the same design. 
Remember - never recreate the wheel. On this second page we will change the title of the 


page, remove the background image, put some colors in the table cells, add an ordered list 
and an unordered list, and an additional table inside of the existing one. 


A. Save Your Existing Web File With A New Name 


1. Open home.html in Dreamweaver. 
2. Click on the File menu. 
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3. Click on Save As. 


ec, 


My Documents 


wie v 
My Network 


Places Save as type: All Documents [" him;*.himel;",shtm;".shtml;" hla; hte," xhtml 


Make sure you are saving this file to the same place as the home.html. 

Rename the file in the File name: box. (For example: wild.html) 

Click on the Save button. You now have a second Web file that has the same design, 
structure, and links as the home page. All you need to do is change the title and 
change the main content area. 


OO 


B. Change Web Page Title 


1. Select the text in the Title: box on the Dreamweaver toolbar. Or go to the Modify 
menu, to Page Properties, and change the title there by selecting Title/Encoding in the 
Category Window. 

2. Type in anew title for your second page. For example: Elephants in the Wild. 

3. Save your Web page. 


Commen * Bos 1a @-4-B8AQ g-? a ” 
| si} Code | 3] Sete | 4 Oeskgn Tithe: |Chephartss wn the Wikt wit @& Cc RS J a lcusvere 
Document Title 


C. Remove the Background Image 


1. Click on the Modify menu. 
2. Click on Page Properties. 
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3. Select the file name in the Background Image: box. 
4. Press Delete on the keyboard. 
5. Click the OK button 


D. Remove Contents From The Content Area Cell Of The table 


1. Select all of the content area except the courtesy section at the bottom of the cell. 

2. Press Delete on the keyboard. 

3. Leave the Heading across the top and the Navigation down the left side for consistent 
design layout and navigation that makes for a good Web site. 


E. Add Background Color To The Table Cells 


1. Click in the top (first) cell of the table. 
2. Click on the Bg box (background color for cell) in the Property Inspector. 
3. Choose a color for that cell. 
4. Click in the navigation cell. 

¥ Properties 

format Parag agh ~ Syke here » Bs £238 wv ¥ 90 

Fort Avisl, Hebvetce Ste Nore -! $= SE So 2 Lert 

= Ca Horg Defauk ow W 2P% 90 | Page Propertans 

fee CJ 20 Wert Top ~*~ Hu 

> Rests 

background image for cell background color for cell border oon for cell 
5. Click on the Bg box in the Property Inspector. 
6. Choose a complimentary color for that cell. 
7. Leave the content area cell white. Your content (usually the most important part of 


your page) needs to be readable. Background color tends to "drown out" text heavy 
pages. 


F. Add New Content 


Type in a new heading for the content area. For example: Elephants Going Wild. 
Format the heading the same way you did on the first page. 

Insert a horizontal rule under the heading. 

Add content that explains the purpose of this page. Remember this is not the home 
page so you will want to briefly explain what this page is about, whom it is for, and 
what can be found there. As part of the content we will be including lists, anchor links 
and a table. 


ga ee 
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G. Adding Unordered (Bulleted) Lists 


1. Place your cursor after the description of your page. 
2: 
3. Type the following text, pressing the Enter key after each entry. These three items will 


Press Enter on the keyboard. 

later become anchor links that jump to places further down the same page. 
Breeding in the Wild 

Feeding in the Wild 

Endangered? 


Select the three lines of text. 
Click on the unordered list button in the Property Inspector. 


¥ Properties &| 
Format. None + Style tone - BES ABs +90 a 
Font Defat Port ~~ Sie Nore wo if t= $= £5 2 Target 
[ae] Cet Hore (Defauk | W No wrap [] 89 QO —_ [Page rrovertes... ] 
Clit Vert tefet v H Header) Bg. ted |. 


Unordered List Button 


H. Adding Ordered (Numbered) Lists 


Oo w 


1. Place the cursor after the bulleted list. 
2. 
3. Type the following text, pressing the Enter key after each entry. 


Push return/enter to move the cursor down a line. 


Some Great Web Resources on Elephants: 


http://www.pbs.org/wnet/nature/elephants/ (Nature: Elephants of Africa) 


http://www. livingwithelephants.org/ (Living With Elephants Foundation) 


http://Awww.save-the-elephants.org (Save The Elephants) 


Select the text -- Some Great Web Resources on Elephants and format with bold. 
Select the three web URL lines. 

Click on the Ordered list button on the Property Inspector. 

Link these three lines to their external Web sites. (Hint: you have the URL for the link 
right in the line.) 
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1. Adding Anchor Links To Your Page 


An anchor link is a hypertext link that takes you to another spot on the same web page 
instead of to another page or another web site. The "Back To Top" link is a common example 
of an anchor link that allows a person to jump back to the top of a web page without scrolling. 
For web pages that contain long passages of text information, the anchor link is a great way 
to allow your viewer to get quickly back and forth on the page without having to scroll for 


information. 


e Create a table. 


1. 


CON Od why 


Place the cursor below the ordered list on your page. 

Insert a table with three (3) rows and two (2) columns. 

Set the table border at 6. 

Click OK. 

Type in a name for the table in the Property Inspector. 

Choose a border color that compliments the cell colors you chose earlier. 
Type Breeding in the Wild in the first row. 

Type Feeding in the Wild in the second row. 

Type Endangered? in the third row. 


10. Change the vertical alignment in each cell to "top". 
11.Change the horizontal alignment in the first cell of each row to "center". 


e Create a place to jump to (The Name Anchor) 


1. 
2. 


3. 


4. 


5: 


Place the cursor at the beginning of Breeding in the Wild in the first row. 


Click on the Named Anchor object & in the Common Objects Toolbar. 
Comenen ¥ BOS BFaS-@ BEQA-S 
Type in breeding in the Anchor Name: box. 


Named Anchor 


Anchor name: | breeding| OK 


Help 


Cancel 


Click the OK button. The anchor icon is now next to Breeding in the Wild. 


\.Breeding in the Wild 


Repeat steps 2a through e above with the rows two and three of the table. 
Name the anchors "feeding" and “endangered”. 
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e Create hypertext links to jump to the anchors. 
5. Select the Breeding in the Wild text in the unordered list. 
6. Type #breeding in the Link box in the Property Inspector. The # sign indicates a 
link to an anchor with that name on the same page. 


¥ Properties 
Format None ¥ Style Nore + BL ESFBAA Uk ttreping ¥ 90 
Fort Arial, Helvetcy Sine None w < = s= 2B 28 large ¥. 
fe] ct teak va Oe) med) © 92  (pieete 
1 2 Vert Top vu Header Bi. ted i 
> Rents 


anchor link with # sign 


3. Select each of the next two items in the list and type in the appropriate anchor 
link in the Property Inspector. Don't forget to start the link with the # sign. 


e Save your Web page. 


IV. Adding a Form 


On the home page, we will put a simple mailto form so that people can order more 
information about Elephants by purchasing the fantastic book you have written about your 
own experiences. There are many methods that forms use to send and/or process 
information. A mailto form is the simplest. It takes the information inputed into the form fields 
and mails that information to the email address supplied in the form setup. Other forms may 
require cgi or perl scripting. We will not be looking at those types of forms in this workshop. 


e Some things to think about when putting forms on your page: 
o what is the purpose of the form? 
o what information do you want to gather? 
o what information do you need to supply? 


Open your home page in Dreamweaver. Go to the bottom of the page just above the courtesy 
section and put your cursor in the empty space. Type in the text: "Order Elephants: Yours, 
Mine and Ours", press the enter key and type in "Latest Book by "your name"". Press the 
enter key. You are now ready to create your form. 


A. Insert a Form Object 


1. Click on the Insert menu 

2. Click on Form in the Form fly-out menu. This will insert the initial form tags to place the 
form objects in. In Dreamweaver, this is indicated by a red box on your page. Always 
make sure you are inside of the red box when inserting form objects. 

3. Enter a name for your form in the Property Inspector. 
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4. Enter mailto:yvouremail@youraddress in the Action box. 
5. Leave the method as POST. 
6. Type text/plain in the Enctype box. 


¥ Properties 
| Form nase Action maiRo:ecclesivarcouver wsu.eds 2 Target ~ Css None v 
orderform Method POST ¥ Enctype text/plain - 


method is post for this type of form type text/plain forthe Enctype 


nang YOURSOET type in mailto: with your email address 


B. Form Objects 


When choosing "Form" from the Insert menu, several "form object" choices are available 
other than the generic "form" choice. They are as follows: 


Text Field - for entering text 

Textarea - provides a space of set dimensions in which the user may input data 

Button - for the submit or reset buttons 

Checkbox - for when there is more than one selection possible 

Radio Button - for when there can be only one item selected 

List/Menu - for when there is a list of items to select from 

File Field - for allowing a users to browse for file on their computers and upload the file 

as form data 

8. Image Field - for making graphical buttons 

9. Hidden Field - stores information entered for use in later visits to the site 

10. Radio Group - lets you dynamically pre-select a radio button within a group of buttons 
when the page is displayed, or when a record is displayed within the HTML form 

11.Jump Menu - a popup menu for linking to documents, files, or other pages/sites 

12. Fieldset - a container tag for a logical group of form elements 

13.Label - provides a way to structurally associate the text label for a field with the field 


of DO? Ol oo 


C. Insert a Text Field 
Click on the Insert menu 


1. Click on Form. 

2. Click on Text Field. This will place a text field in your form. 
Note The Input Tag Accessibility Window may appear prior to inserting your form 
object. In this window, accessibilty options can be made. Screen readers will be able 
to read the label attribute. For our purposes while building this form, we will leave the 
Input Tag Accessibility Attributes as is and click OK. 


Page 24 


Input Tag Accessibility Attributes 


Text entered 

will appear 

on the page : 
ee [cancel] 

. Cancel 
form object ‘© Wrap with label tag __ Cancel 
iis Hel 

Positions = © attach label tag using ‘for! attribute 
the <label> 

tag within © No label tag 

the code. 

Positions - 
the text, Position: _{°) Before form item 

entered in _J 
the label © after form item 

box above 

: : U : 

sitharbatere Access key ab Index 

or after the 
form object. 

IF you don’t want to enter this information when 
inserting objects, change the Accessibility preferences. 


Click on the Text Field object to select it. 

Name the Field in the Property Inspector. 

Enter 30 for the Character Width. 

Enter 80 for the Max Characters. 

Select Single Line for the type. 

Type "Enter Your First and Last Name" in the Initial Value field. 
Place the cursor at the end of the text box outside of the box. 


OR oro 


{3 Towdnks Char Viah 30 Toe @)Segeine C)Matiine § O)Passwced ® 
| arenes Mas Chics 00 ae Val Ente\ou First and Last Nene 3s 
| 

[ i Sen | 


Name of Number of Total number Number of lines Text that directs 
the field letters that of letters that to type in (use user what to type 
will show canbe entered multiline for into field 

comment box) 


10. Insert another Text Field. 

11.Name the Field: address. 

12.Use 50 for Character Width, 100 for Max Characters, single line for type, and "Enter 
Your Complete Address" for the Initial Value. 

13.Click at the end of this Text Field, outside of the text box. 

14. Press the Enter key. 

15. Your fields should look similar to the following: 
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Enter Your First and Last Nar || Enter Your Complete Address 


D. Insert Checkboxes 


Checkboxes are generally used to allow a person to select various items. Checkboxes allow 
more than one selection to be made. In this case, the user could select hardcover books and 
paperback books. Radio buttons are generally used when you want to allow the user only 

one choice. 


Oo eS 


G 
8. 


9. 


Type in "Hardcover books $10.00 each". 

Click on the Insert menu. 

Click on Form. 

Click on Checkbox. This will place a checkbox after the typed text. 
Enter a name for the object. 

Leave the other values in the Property Inspector as is. 


¥ Properties i— 2 
a Chedibox name Checked value | checkba Initial state CO Checked Class | Nore ¥ 3 
hardcover \ 
Name of CheckBox "Checked" would have the box 


checked by default 


Click at the end of the checkbox outside of it. 

Insert a line break. Using the insert menu go to HTML, then over to Special 
Characters, then select Line Break (or use the keyboard shortcut sifttenter). 
Type in "Paperback books $5.00." 


10. Click on the Insert menu. 

11.Click on Form. 

12.Click on Checkbox. This will place a checkbox after the typed text. 
13. Enter a name for the object (paperback). 

14. Leave the other values in the Property Inspector as is. 


E. Insert List/Menu 


Oop WNP 


Click in the space after the first (hardcover) checkbox. 

Type in "Quantity". 

Click on the Insert menu. 

Click on Form. 

Click on List/Menu. This will place a menu list after the typed text. 


Enter a name for the object (quantity1 since we will have two quantity objects). 
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7. Select Menu for the type. 
8. Leave the Initially Selected area blank. 


lis 
i 
ai 
| 
g 
j 
Ke 


Name of the List or What willbe To edit iterns in the 
ListfMenu Menu preselected List or Menu 


9. Click on the List Values button. 

10. Enter the number 1 in the Item label box. 

11.Press the tab key. 

12.Enter the number 1 for the value. 

13.Press the tab key to go to the next item. 

14. Continue entering numbers in the item label and value boxes through the number 4, 


pressing the tab key after each number until you are in the value box with the number 
4. 


4 List ¥alues 


#12! 


Item Label 


15. Click on the OK button. (NOTE: you won't be able to see these menu values in the 


editor, but you can by previewing the page in the Web browser (save the page, press 
F12 and click on the browser refresh button). 

16. Click in the space after the checkbox for Paperback books. 

17. Type in Quantity. 

18. Insert another List/Menu object. This time select List as the type of object. 


¥ Properties B 

— - + gv 

cf List/Menu Type © Menus Height (2 | List Values. } Chess Nore v 3 
"| quantky Lst tons [¥} Allow maikipke 


Number of list items Allows user to select 
you want to be showing more than one item 


19.Enter quantity2 for the object name. 
20.Enter 2 for the Height. This is the number of items that will show in our list. 
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21.Check the box for Allow Multiple. This allows the user to choose more than one item in 
the list (While not practical for this particular list, it is useful for other types of lists.). 

22.Click on the List Values button and enter the numbers 1 through 4 just as with the first 
list/menu object. 

23. Press the Enter key. 


Your form should now look similar to this: 


le nter Your First and Last Name lE nter Your Complete Address 


Hardcover books $10.00 each ~ Quantity [+] 


if 
Paperback books $5.00 each T° Quantity |2 = 


Oe eh ale are be ei hla Om Sie © ww tle ot a ke el ee eS © wo we eb el et ee ee US ow See om © 


F. Insert Radio Buttons 


Insert another line break after the quantity list. 

Type "Would you like your book(s) gift wrapped? Yes". 

Insert a radio button (From the "Insert" menu go to the "Form" fly-out window and 
choose "Radio Button") 

4. Click on the radio button to select it. In the property inspector type "yes" in the name 
field of the Radio Button. Leave the Checked value box text as "radiobutton". Choose 
"Unchecked" for the initial state of the radio button. 


ON 


¥ Properties i 
[FJ Radio Button Checked value “radobutton Intial state checked Class |None =v © 
Yes @ Unchecked 
a 
"yes" will appear inthe email Leave alone to allow "No" will be the 
if this radio button is selected only one choice button default 


G. Insert A Multi Line Text Field 


1. Insert a line break. 

2. Insert a text field (From the "Insert" menu go to the "Form" fly-out window and choose 
"Text Field") 

3. Click on the text field to select it. In the property inspector type "comments" in the 
TextField name box. 

4. Click the Multi line radio button. This will allow the text to scroll if multiple lines of text 
are entered in the text field of the form. 
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5. Type 80 for Char width and 10 for Num Lines. 

6. Select "Physical" for text wrapping. 

7. Enter some text for the Int val which will appear in the text field. For this example we 
have typed "Tell how you enjoyed the latest book". 


¥ Properties 


(— TextField Char with 80 Type © Single ine @MRi ine © Password Class None v 
comments Num L 0 Int val Tel how you enjoyed the latest book? 


Wy yaa 


Name of Yidth of Number Type Multiline Text that directs 
Text Field Text Field of lines of text allows for user what to type 
showing wrapping more text into Field 


H. Insert Submit and Reset Buttons 


1. Insert another line break after the "text field". 


2. Insert a button (From the "Insert" menu go to the "Form" fly-out window and choose 
"Button") 


3. Click on the button to select it. In the property inspector type "Submit" in the Button 
name box. 


4. Change the Value to "Send Your Order". This is the text that will appear on the button. 
5. Click the "Submit Form" radio button for the action. 


Send Your Order 


| ¥ Properties 

(4 Button name Value Send Your Order Action () Submit form Nore Class | None - 4 
Sp iben Reset Form 
Name of button Text that appears Action when button 
(should be "submit") on button is clicked 


1. Click to the right of the "Send Your Order" button. 
2. Insert another button (From the "Insert" menu go to the "Form" fly-out 
window and choose "Button") 


3. Click on the button to select it. In the property inspector type "Reset" in 
the Button name box. 


4. Change the Value to "Clear the Form ". This is the text that will appear 
on the button. 


5. Click the "Reset form" radio button to set the buttons action. 
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Clear the Form 


¥ Properties & 
ow futon name Value Clear the form Action ©) Subent form ONore Class Nore y 4 
Reset © Reset form 
Name of button Text that appears Action when button 
(should be "Reset") on button is clicked 


Once you have saved your document you can preview your web page in the default browser 


by pushing F12, or from the objects toolbar, click the ®."Preview/Debug in browser" Earth 
shaped icon and select a browser from the list. 
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